<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" type="text/css" href="/static/lib/datatables/1.10.15/jquery.dataTables.css">
    <div th:include="admin/common :: head"></div>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/static/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/static/lib/respond.min.js"></script>
    <![endif]-->
    <title>详情页面</title>
</head>
<body>
<div class="cl pd-20" style=" background-color:#5bacb6">
    <!-- 教师头像默认保存在home/teacherImg -->
    <img class="avatar size-XL l" src="/static/images/logo/favicon.png">
    <dl style="margin-left:80px; color:#fff">
        <dt>
			<span class="f-18" th:text="${courseExperiment.title}">
			</span>
            <br>
            <span class="f-14" th:text="总分+${courseExperiment.score}+分">
			</span>
        </dt>

    </dl>
</div>
<div class="pd-20">
    <table class="table">
        <tbody>
        <tr>
            <th class="text-r" width="80">实验详情：</th>
            <td th:utext="${courseExperiment?.detail}"></td>
        </tr>

        <tr>
            <th class="text-r" width="80">超时提交：</th>
            <td th:if="${courseExperiment?.overSubmit}==0">
                <span class="label label-danger radius">不允许</span>
            </td>
            <td th:if="${courseExperiment?.overSubmit}==1">
                <span class="label label-secondary radius">允许</span>
            </td>
        </tr>

        <tr>
            <th class="text-r" width="80">状态：</th>
            <td th:if="${courseExperiment.status}==1">
                <span class="label label-secondary radius">实验进行中</span>
            </td>
            <td th:if="${courseExperiment.status}==0">
                <span class="label label-warning radius">实验已经截止</span>
            </td>
        </tr>

        <tbody  th:each="url,urlList : ${urlList}">
             <tr>
                <th class="text-r" width="80" th:text="附件+${urlList.index+1}"></th>
                 <td >
                     <a th:href="${url}" id="myUrl">点击查看下载附件</a>
                     <style>
                         #myUrl{
                             display: block;
                             height: 4em;
                             background-repeat: no-repeat;
                             line-height: 4em;
                             padding-left: 4em;

                             -webkit-background-size: 3em;
                             background-size: 3em;
                             background-position: left center;
                         }
                         #myUrl:hover{
                             color: #000;
                         }
                         a{
                             background: url("/static/images/admin/file/un.png");
                         }
                         a[href$="docx"],
                         a[href$="doc"],
                         a[href="docm"],
                         a[href$="dotx"],
                         a[href$="dotm"]{
                             background: url("/static/images/admin/file/word.png");
                         }
                         a[href$="xls"],
                         a[href$="xlsm"],
                         a[href$="xltx"],
                         a[href$="xltm"],
                         a[href$="xlsb"],
                         a[href$="xlam"],
                         a[href$="xlsx"]{
                             background: url("/static/images/admin/file/excel.png");
                         }
                         a[href$="pptx"],
                         a[href$="ppt"],
                         a[href$="pptm"],
                         a[href$="ppsx"],
                         a[href$="potx"],
                         a[href$="potm"],
                         a[href$="ppam"]{
                             background: url("/static/images/admin/file/point.png");
                         }
                     </style>
                 </td>
             </tr>
        </tbody>



        <tr>
            <th class="text-r" width="80">创建时间：</th>
            <td th:text="${#dates.format(courseExperiment?.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
        </tr>
        <tr>
            <th class="text-r" width="80">截止时间：</th>
            <td th:text="${#dates.format(courseExperiment?.endTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
        </tr>


        </tbody>
    </table>
</div>

<footer th:include="admin/common :: footer"></footer>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/static/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/static/lib/datatables/1.10.15/jquery.dataTables.js"></script>
<script type="text/javascript" src="/static/lib/laypage/1.2/laypage.js"></script>
</body>
</html>